<template>
    <div class="fruiter-container">
      <div class="fruiter-title-content">
          <div class="title">
            果树资源数字化情况
          </div>
      </div>
      <div class="fruiter-content">
        <template v-for="(item,index) in fruiterList">
          <div 
          :style="{width:(isHall?'300px':'200px'),cursor:index===0||index===1?'pointer':'unset'}"
          class="single" 
          :key="index" 
          @click="showPoints(index)" 
          :class="clickIndex===index&&clickIndex<2?'showbg':''"
          >
              <img :src="item.img" alt="">
              <div class="name">{{item.name}}</div>
              <div class="nums">
                  <Number :number="item.num" :type="2" />
                  <a-icon type="right" style="font-size:14px;color:#fff;padding:0 0 12px 5px" v-if="index<2" />
              </div>
          </div>
        </template>
      </div>
    </div>
</template>
<script>
import Number from './numbers.vue'
import { queryResourceStatisticsdp } from '@/api/dashboards'
import store from '@/store'
export default {
  components:{Number},
  props: {
      isHall:{
          type:Number
      },
  },
  data() {
    return {
      clickIndex:undefined,
      fruiterList:[
              {
                img:require('../assets/fgqy.png'),
                name:'覆盖企业数 (家)',
                num:0
              },
              {
                img:require('../assets/fggy.png'),
                name:'覆盖果园数 (家)',
                num:0
              },
              {
                img:require('../assets/fgzs.png'),
                name:'覆盖株数 (株)',
                num:0
              },
              {
                img:require('../assets/ljfml.png'),
                name:'累计赋码量 (个)',
                num:0
              },
              {
                img:require('../assets/ljsmcs.png'),
                name:'累计扫码次数 (次)',
                num:0
              },
      ],
    }
  },
  watch: {
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
  },
  created(){
     this.initWebSocket()
  },
  mounted(){
      this.queryResourceStatisticsdp()
  },
  methods: {
     initWebSocket: function() {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      var userId = store.getters.userInfo.id
      // var userId = 'e9ca23d68d884d4ebb19d07889727dae'
      var url = (window._CONFIG['domianURL']).replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
      console.log(url);
      this.websock = new WebSocket(url)
      this.websock.onopen = this.websocketOnopen
      this.websock.onerror = this.websocketOnerror
      this.websock.onmessage = this.websocketOnmessage
      this.websock.onclose = this.websocketOnclose
    },
    websocketOnopen: function() {
      console.log('WebSocket连接成功')
    },
    websocketOnerror: function(e) {
      console.log('WebSocket连接发生错误')
      this.reconnect()
    },
    websocketOnmessage: function(e) {
      var data = eval('(' + e.data + ')') // 解析对象
      console.log('-----接收消息-------', data)
      if(data.messageCode==="resourceStatistics"){
        if(data.result&&data.result.length){
          this.fruiterList[0].num = data.result[0].subjectNum&&data.result[0].subjectNum
          this.fruiterList[1].num = data.result[0].orchardNum&&data.result[0].orchardNum
          this.fruiterList[2].num = data.result[0].treeNum&&data.result[0].treeNum
          this.fruiterList[3].num = data.result[0].qrcodeGenerateNum&&data.result[0].qrcodeGenerateNum
          this.fruiterList[4].num = data.result[0].qrcodeScanNum&&data.result[0].qrcodeScanNum
        }
      }
    },
    websocketOnclose: function(e) {
      if (e) {
        console.log('connection closed (' + e.code + ')')
      }
      this.reconnect()
    },
    reconnect() {
      var that = this
      if (that.lockReconnect) return
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function() {
        console.info('尝试重连...')
        that.initWebSocket()
        that.lockReconnect = false
      }, 5000)
    },
    async queryResourceStatisticsdp(val) {
          let res = await queryResourceStatisticsdp({
          year:val,
          })
          if(res.result){
              this.fruiterList[0].num = res.result.subjectNum&&res.result.subjectNum
              this.fruiterList[1].num = res.result.orchardNum&&res.result.orchardNum
              this.fruiterList[2].num = res.result.treeNum&&res.result.treeNum
              this.fruiterList[3].num = res.result.qrcodeGenerateNum&&res.result.qrcodeGenerateNum
              this.fruiterList[4].num = res.result.qrcodeScanNum&&res.result.qrcodeScanNum
          }
      },
      showPoints(val){
          this.clickIndex = val
          if(val===0){
            this.$emit('getMapPonit','company')
          }else if(val===1){
              this.$emit('getMapPonit','garden')
          }else{
            return
          }
      }
  },
}
</script>
<style lang="less" scoped>
.fruiter-container{
   .fruiter-title-content{
    padding-top: 20px;
     width: 160px;
    height: 20px;
    position: absolute;
    bottom: 180px;
    left: 50%;
     transform: translate(-50%);
    z-index: 999;
    background: url('../assets/fruit-bg.png') no-repeat;
    background-size: 100% 100%;
    .title{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 12px;
      width: 126px;
      height: 18px;
      font-size: 14px;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 18px;
      z-index: 1000;
    }
  }
 .fruiter-content{
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
    border-radius: 6px;
    background: rgba(11, 17, 51, 0.85);
    .showbg{
      width: 180px;
      height: 120px;
      background:url('../assets/click-bg.png') no-repeat;
      background-size: 100% 100%;
    }
    .single{
      width: 200px;
      height: 140px;
      padding-top: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img{
        width: 48px;
        height: 48px;
      }
      .name{
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 5px;
        // padding:0 5px 0;
      }
      .nums{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>